<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Title</title>
		<style type="text/css">
			li.basic {
				background-color: pink;
				font-size: 32px;
				color: red;
			}
			.bigger {
				font-size: 40px;
			}
		</style>
	</head>
	<body>
		<input type="button" value="添加basic类">
		<input type="button" value="添加bigger类">
		<input type="button" value="移除bigger类">
		<input type="button" value="判断bigger类">
		<input type="button" value="切换类" />
		<ul>
			<li class="aa bb cc dd">1</li>
			<li class="aa bb cc dd">2</li>
			<li class="aa bb cc dd">3</li>
			<li class="aa bb cc dd">4</li>
		</ul>
		
		<script src="jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("input").eq(0).click(function(){
					//添加一个类
					$("li").addClass("basic");
				});
				$("input").eq(1).click(function(){
					$("li").addClass("bigger");
				});
				$("input").eq(2).click(function(){
					//移除一个类
					$("li").removeClass("bigger");
				});
				//判断类
				$("input").eq(3).click(function(){
					//判断一个类
					console.log($("li").hasClass("bigger"));
				});
				
				$("input").eq(4).click(function(){
					//判断li有没有basic类,如果有,就移除他,如果没有,添加他
					//toggle
					$("li").toggleClass("basic");
				});
			});
		</script>
	</body>
</html>